/*
* @Author: jh
* @Date: 2018/4/10
* @description: 系统 cvs列表
*/
<template>
  <div>
    <!-- <div class="p-30">角色列表</div> -->
    <el-form ref="form" :model="CvsUserListSearch" label-width="80px">
        <el-row :gutter='5'>
            <el-col >
              <el-form-item label="查询" class='pull-left m-r-10'>
                <el-input v-model="CvsUserListSearch.keyWord" class='w-250' placeholder="请输入客户名称、登录账号" @keyup.enter.native="getCvsList">
                </el-input>
              </el-form-item>    
               <!-- 1 客户名称 2：账户 string  -->
              <el-form-item label-width="0" class='pull-left'>
                  <el-select v-model="CvsUserListSearch.searchType" placeholder="请选择类型" class='w-150'>
                     <!-- <el-option label="请选择" value=""></el-option> -->
                    <el-option 
                        v-for="(item,index) in cvsSeachType"
                        :key='index'
                        :label="item.name" 
                        :value="item.id">
                    </el-option>
                  </el-select>
              </el-form-item>
         
             <el-form-item label="客户状态" class='pull-left m-l-30'>
                <el-select v-model="CvsUserListSearch.licenseStatus" placeholder="请选择活动区域">
                    <el-option label="全部" value=""></el-option>
                    <el-option 
                      v-for='(item,index) in guestState'
                      :key='index' 
                      :label="item.dictName" 
                      :value="item.dictValue">
                    </el-option>
                </el-select>
              </el-form-item>
            
             <el-form-item label-width="0px" class='pull-right'> 
                <el-button  @click="getCvsList" type="primary" round>搜索</el-button>
                 <el-button @click="toDetail('-1')" type="primary" round>添加</el-button>
                 <!-- <el-button @click="showEmail = true" type="primary" round>邮件提醒</el-button> -->
              </el-form-item>
          </el-col>
        </el-row> 
        <el-row :gutter='5'> 
            
            <el-col :span='6'>
                <el-form-item label="授权日期">
                    <el-date-picker
                        class="dateWidth"
                        v-model="CvsUserListSearch.licenseStartDate"
                        type="date"
                        placeholder="请选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <!-- <el-col :span='6'>
                <el-form-item label="邮件提醒">
                    <el-select v-model="CvsUserListSearch.role" placeholder="请选择活动区域">
                      <el-option label="全选" value=""></el-option>
                      <el-option label="授权到期" value="1"></el-option>
                      <el-option label="账号" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col> -->
            <!-- <el-col :span='8' >
             
            </el-col> -->
        </el-row> 
      </el-form>  
       <!-- 添加页面 -->
       <Add v-if="showAdd" :isShowAddFun="isShowAddFun" :id="id" @getCvsList='getCvsList'></Add> 
       <!-- 邮件提醒 -->
       <!-- <EmailTip v-if="showEmail" :isShowEmailFun="isShowEmailFun"></EmailTip>  -->
       <!-- 信息汇总部分       -->
      
           <el-row class='p-l-12'>
              <el-col>
                <!-- <span>已选中（0）个</span>  -->
                <span class='ca-info-color'>待授权：{{ waitAuth }} 条</span> 
                <span class='m-l-20 ca-info-color'>已授权：{{ authorized }} 条</span> 
                <span class='m-l-20 ca-info-color-red'>授权到期：{{ expireAuth }}</span> 
             </el-col>
           </el-row>
        
      <div class="m-t-15">
                <el-table
                    :data="tableData"
                    @sort-change='tableSort'
                    >
                    <!-- <el-table-column
                        label="全选"
                        type="selection"
                        align="center">
                    </el-table-column> -->
                      <el-table-column
                         type="index"
                         label="序号"
                        width="80"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        property="accountName"
                        label="登陆账号" 
                        show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                            <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                               <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">{{ scope.row.roleName }}</el-button>
                            </el-tooltip>
                        </template> -->
                    </el-table-column>
                      <el-table-column
                        property="userName"
                        label="用户名称" 
                        show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                            <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                               <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">{{ scope.row.roleName }}</el-button>
                            </el-tooltip>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        property="userType"
                        label="客户类型">
                        <template slot-scope="scope">
                              {{scope.row.userType+'' | getDicNameById('guestType')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="licenseStatus"
                        label="客户状态">
                        <template slot-scope="scope">
                            <span :class="scope.row.licenseStatus===0?'ca-color-danger':scope.row.licenseStatus==1?'ca-info-color__blue':'ca-info-color__gray'">
                            	<!-- <span> -->
                                {{scope.row.licenseStatus+'' | getDicNameById('guestState')}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="createTime"
                        label="申请日期">
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="licenseDate"
                        label="授权日期">
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="licenseExpireDate"
                        label="授权到期日">
                    </el-table-column>
                    <!-- <el-table-column
                        property="roleName"
                        label="邮件提醒">
                        <template slot-scope="scope">
                            <span>{{scope.row.roleStatus | getNameById('dataEnable')}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        width="150px"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button  type="text" @click="toDetail(scope.row.id)">编辑</el-button>
                            <el-button  type="text" @click="deleteConfirm(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination class="align-center m-t-30"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="CvsUserListSearch.pageParam.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import Add from './add.vue'; //组件
import EmailTip from './email-tip.vue'; //组件
import CvsService from '../../../service/cvs/cvs-user'; // 接口
import { CvsUserSearchParam, CvsUserDTO } from '../../../api/Interface'; // 接口
import { getParamsForList, setParamsForList } from '../../../libs/utils';
// interface Form {
//   "keyWord": "string",
//   "licenseExpireDate": "string",
//   "licenseStartDate": "string",
//   "licenseStatus": "string",
//   "pageParam": {
//     "pageIndex": 0,
//     "pageSize": 0
//   },
//   "searchType": "string",
//   "sorts": "string"
// }
// interface TableData {
//    [index: number]: object;
// }
interface SortObject {
    column: object;
    order: string;
    prop: string;
}
@Component({
  components: { 
       Add,
       EmailTip,
  }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public msg: number = 123;
  public CvsUserListSearch: CvsUserSearchParam = {
    //    licenseStatus: '',
    //    searchType: '1',
       pageParam: {
           pageIndex: 1,
           pageSize: 10,
       }
    } as CvsUserSearchParam;
  public tableData: CvsUserDTO[] = [] as CvsUserDTO[]; // 后台数据
  public totalCount: number = 0; // 总数
  public currentPage: number = 1; // 当前页
  public showAdd: boolean = false; // 是否显示 添加页
  public id: string = '-1'; // 角色id
  public showEmail: boolean = false; // 是否显示发送邮箱确认框
  public waitAuth: number = 0; // 待授权
  public authorized: number = 0; // 已授权
  public expireAuth: number = 0; // 授权过期
  public guestState:  Array< object > = this.$store.state.user.dictionary.dicList.guestState; // 客户状态
  public cvsSeachType:  Array< object > = this.$store.state.csConst.cvsSeachType; // 客户类型
  public guestType:  Array< object > = this.$store.state.user.dictionary.dicList.guestType; // 客户类型
  // refs
  public $refs: { };

  // watch
  @Watch('msg')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }

  // 声明周期钩子
  public mounted() {
     // console.log(this.$store.state,'pppp');
     // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams = getParamsForList(routerName);
    this.CvsUserListSearch = Object.assign({}, this.CvsUserListSearch, localParams.searchParams);
    // 获取local中存储的搜索条件 end
    this.getCvsList();
  }
  public created() {
    // this.getCvsList();
  }
  // 列表排序
  public tableSort(val: SortObject ) {
    if ( val.prop && val.order) {
        //排序顺序---为正序+  倒序 -
        let sort: string = '';
        if (val.order === 'ascending') {
            sort = '+';
           
        } else {
             sort = '-';
        }
        const sortBy: string = val.prop.replace(/([A-Z])/g, '_$1').toLowerCase();
        //字段拼接
         this.CvsUserListSearch.sorts = sort + sortBy;
        //调用列表
         this.getCvsList();
    }
  }
  // 列表
  public async getCvsList() {
    // local中存当前搜索条件 
    const params = {
        pageParam: this.CvsUserListSearch.pageParam,
        searchParams: this.CvsUserListSearch,
    };
    const routerName = this.$root.$route.name;
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
     const res = await CvsService.sysUserInsert(this.CvsUserListSearch);
     this.tableData = res.resultData;
     this.totalCount = res.totalCount;
     // 统计信息
     res.extMeta.licenseStatusCount.map((item) => {
         if (item.licenseStatus === 0) {
            this.waitAuth = item.licenseCount; // 待授权
         } else if (item.licenseStatus === 1) { 
           this.authorized = item.licenseCount; // 已授权
         } else if (item.licenseStatus === 2) {
           this.expireAuth = item.licenseCount; //授权过期
         }
     });
  }
  // pageSize 改变时会触发
  public handleSizeChange(val: number) {
      this.CvsUserListSearch.pageParam.pageSize = val;
      this.getCvsList();
  }
  // 当前页改变时会触发
  public handleCurrentChange(val: number) {
      this.CvsUserListSearch.pageParam.pageIndex = val;
      this.getCvsList();
  }
  public isShowAddFun() {
      this.showAdd = !this.showAdd;
  }
   // 跳转到编辑页
  public toDetail(id: string) {
      this.id = id; // 假数据
      this.isShowAddFun();
  }
  public isShowEmailFun() {
      this.showEmail = !this.showEmail;
  }
  // 删除方法
  public deleteConfirm(id: string) {
     this.$confirm('是否删除此用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.deleteDate(id);
        });
  }
    // 删除方法
  public async deleteDate(id: string) {
        const res = await CvsService.deleteUserById(id);
        if (res.resCode === '0') {
            this.$message({
                type: 'success',
                message: 'cvs用户删除成功!',
                center: true,
            });
            this.getCvsList();    
        }
  }
  public isSendEmail() {
      this.$confirm('确认发送邮件提醒?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
            center: true,
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
             center: true,
          });          
        });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.w-150{
        width: 150px;
}
.w-200{
    width: 200px;
}
.w-250{
    width: 300px;
}
.dateWidth{
    width: 100%;
}
.p-l-12{
    padding-left: 12px;
}
</style>
